<template>
	<view class="flex padding-lg flex-wrap justify-between" style="margin-top: 80rpx;">
		<view class="content">
			<!-- 右侧返回按钮 -->
			<button 
			class="cu-btn" 
			style="
				background-color: rgba(220, 226, 224, 0.5);
				width: 110rpx; 
				height: 110rpx; 
				border-radius: 40rpx; 
				position: absolute;
				top: 40rpx;
				left: 600rpx;
				"
			@click="back"
			>
				<uni-icons 
					fontFamily="iconfont" 
					:size="50"
				>
				{{"\ueb79"}}
				</uni-icons>
			</button>
			<view class="animate" style="margin-top: 150rpx;" >
				<video src="/src/static/planeAnimation.mp4" autoplay="true" object-fit="cover"></video>
				
			</view>
			
			<view class="logo" >
				<text>创建GreenBook</text>
			</view>
			
			<view class="slogan">
				<text>“每场旅行都值得纪念”</text>
			</view>
			
			<view class="newUser-cover">
				<view class="tip">
					<text>新用户免费领取 1 本GreenBook</text>
				</view>
			</view>
			
			<view class="btn-begin"@click="handleBegin">
				<text>开启旅行</text>
			</view>
			
			<view class="btn-buy">
				<text>购买更多小册</text>
			</view>
			
		</view>
	</view>
</template>

<script setup>

const back = ()=> {
	uni.navigateTo({
		url:'/pages/main/main',
		animationType:'slide-in-bottom'
	})
}

const handleBegin = ()=>{
	uni.navigateTo({
		url:'/pages/green_books/bookForm',
		animationType:'slide-in-right'
	})
}

	
</script>

<style>
.page{
	background-color: #F4FAF8;
}
.content{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20rpx;

}
.logo{
	font-size: 50rpx;
	font-weight: bold;
	display: flex;
	border-radius: 25rpx;
	width: 90%;
	align-content: center;
	justify-content: center;
	padding: 15rpx;
	margin-bottom: 20rpx;
}
.slogan{
	font-size: 20rpx;
	display: flex;
	border-radius: 25rpx;
	width: 90%;
	align-content: center;
	justify-content: center;
	padding: 15rpx;
	background-color: rgba(220, 226, 224, 0.5);
	margin-bottom: 20rpx;
	
}
.newUser-cover{
	display: flex;
	height: 200rpx;
	flex-direction: column-reverse;
	
}
.tip{
	font-size: 23rpx;
	font-weight: bold;
	color:#2DD296;
	width: 500rpx;
	justify-content: center;
	align-content: center;
	display: flex;
	background-color: #FFF;
	border-radius: 40rpx;
	padding: 15rpx;
	position: relative;
	margin-bottom: 10rpx;
	box-shadow: 0 5rpx 5rpx rgba(45, 210, 150, 0.3);
}
.tip::after {
  content: '';
  position: absolute;
  bottom: -8rpx; 
  left: 50%;
  transform: translateX(-50%);
  border-width: 12rpx 12rpx 0 12rpx;
  border-style: solid;
  border-color: #fff transparent transparent transparent; 
}

.btn-begin{
	font-size: 28rpx;
	font-weight: bold; 
	color: #FFF; 
	display: flex;
	justify-content: center;
	align-content: center;
	width: 90%;
	height: 80rpx;
	border: 1px solid #2DD296;
	border-radius: 40rpx;
	padding: 20rpx;
	background-color: #2DD296;
	box-shadow:0 4rpx 12rpx 5rpx rgba(45,210,150,0.5);
	margin-bottom: 30rpx;
	
	&:active {
	  transform: scale(0.98);
	  opacity: 0.9;
	}
}
.btn-buy{
	font-size: 23rpx;
	font-weight:bold;
	color:#8A8F8C;
	display: flex;
	justify-content: center;
	align-content: center;
	width: 90%;
	height: 80rpx;
	/* border: 1px solid ; */
	border-radius: 40rpx;
	padding: 20rpx;
	background-color: rgba(220, 226, 224, 0.5);
	
	&:active {
	  transform: scale(0.98);
	  opacity: 0.9;
	}
}

	       
</style>
